<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="__LAYUIMINI__/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="__LAYUIMINI__/css/public.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
           
            <div>
                <script type="text/html" id="toolbarDemo">
                    <div class="layui-btn-container">
                       
                        <!-- <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button> -->
                    </div>
                </script>
                      
                <fieldset class="table-search-fieldset">
                    <legend>搜索信息</legend>
                    <div style="margin: 10px 10px 10px 10px">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">名称</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="name" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                              
                                
                                <div class="layui-inline">
                                    <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </fieldset>
                <table id="cardList" class="layui-table" lay-filter="cardList"></table>
                
            </div>
        </div>
    </div>
    

    <!-- 操作列 -->
    <script type="text/html" id="auth-state">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    </script>

    <script src="__LAYUIMINI__/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="__LAYUIMINI__/js/lay-config.js?1" charset="utf-8"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    
    
    <script>
        layui.use(['table','form'], function () {
            var $ = layui.jquery;
            var table = layui.table;
            var form = layui.form;

            // 创建渲染实例
            table.render({
                elem: '#cardList'
                , url: 'list' // 此处为静态模拟数据，实际使用时需换成真实接口
                , toolbar: '#toolbarDemo'
                , defaultToolbar: ['filter', 'exports', 'print', {
                    title: '帮助'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , cellMinWidth: 80
                , page: true
                , cols: [[
                    { field: 'id',  title: 'ID'}
                    , { field: 'name',  title: '名称'}
                    ,{ field: 'logo',  title: '图标' ,templet: function (res){
                        return '<img class="layui-upload-img"  src="'+res.logo+'">'
                    }}
                    , { field: 'address',  title: '地址'}
                    , { field: 'tel',  title: '联系电话'} ,
                     {field: 'qrcode ', title: '商品列表',
                        templet: function (d) {
                                return '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="productList">商品列表</a></span>';
                        }
                     }
                    ,{ field: 'status',  title: '状态'}
                    
                    , { field: 'created_at',  title: '创建时间'}
                    , {  title: '操作', toolbar: '#auth-state' }
                  

                ]]
                , done: function () {
                    var id = this.id;
                   
                }
                , error: function (res, msg) {
                    console.log(res, msg)
                }
            });

            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                //执行搜索重载
                table.reload('cardList', {
                    page: {
                        curr: 1
                    }
                    , where: {
                        name: data.field.name,
                        type_id: data.field.type_id,
                        type_child_id: data.field.type_child_id,
                    }
                }, 'data');
                return false;
            });

           

            


            //监听工具条
            table.on('tool(cardList)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
              
                if (layEvent === 'del') {
                    var id = data.id
                    layer.msg('确定删除店铺？', {
                        time: 10000, //10s后自动关闭
                        btn: ['确定', '取消'],
                        btn1: function () {
                            $.ajax({
                                type: "post",
                                url: "materialDel",
                                data: { id: id },
                                dataType: "json",
                                success: function (res) {
                                    layer.msg(res.msg)
                                    if (res.code == 1) {
                                        table.reload('cardList');
                                    }
                                }
                            });
                        },

                    });
                }else if (layEvent === 'edit') {
                    var index = layer.open({
                        title: '修改店铺',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: 'editStore?id=' + data.id,
                        end: function () {
                            table.reload('cardList');
                        }
                    });
                }else if(layEvent === 'productList'){
                    var index = layer.open({
                        title: '商品列表',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: 'productList?id=' + data.id,
                        end: function () {
                            table.reload('cardList');
                        }
                    });
                }
            });

           

        });
    </script>
</body>

</html>